<template>
	<div id="category" style="padding: 20px;">
		<el-button type='danger' @click='addFirst'>添加一级分类</el-button>
		<div class="hr-e9e9e9"></div>
		<div>
			<el-row :gutter="30">
				<el-col :span="8">
					<div class="category-wrap">

						<div class="category" v-for="(item,index) in category.val" :key='item.id'>
							<h4>
								<svg-icon icon-class="minus"></svg-icon>
								{{item.category_name}}
								<div class="buttom-group">
									<el-button size='mini' type='danger' round @click='edit({type:"editOne",item})' >编辑</el-button>
									<el-button size='mini' type='success' round @click='addChildren(item)'>添加子级</el-button>
									<el-button size='mini' round @click='deleteFirstM(item)'>删除</el-button> 
								</div>
							</h4>
							<ul v-if="item.children">
								<li v-for="(itm,i) in item.children" :key='itm.id'>
									{{itm.category_name}}
									<!-- 三级或者更多 -->
									<div class="buttom-group">
										<el-button size='mini' type='danger' round   @click='edit({type:"editTwo",itm})'>编辑</el-button>
										<!-- <el-button size='mini' type='success' round>添加子级</el-button> -->
										<el-button size='mini' round @click='deleteFirstM(itm)'>删除</el-button>
									</div>
								</li>
							</ul>
						</div>

					</div>
				</el-col>
				<el-col :span="16">
					<h4 class="menu-title">一级分类编辑</h4>
					<el-form label-width="142px" class="from-wrap" ref="categoryFrom">
						<el-form-item label="一级分类名称：" prop="categoryName" v-if='category_first'>
							<el-input v-model="form.categoryName" :disabled='disabled_first'></el-input>
						</el-form-item>
						<el-form-item label="二级分类名称：" prop="secCategoryName" v-if='category_children'>
							<el-input v-model="form.secCategoryName" :disabled='disabled_children'></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="danger" @click="submit" :loading='isLoad' :disabled='disabled_btn'>{{btnTxt?'确定添加':'确定修改'}}</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {
		reactive,
		ref,
		onMounted,
		watch
	} from "@vue/composition-api";
	import {
		addFirstCategory,getCategoryAll,addChildrenCategory,deleteCategory,editCategory
	} from '@/api/news.js'
	import {global} from '@/utils/global.js'
    import  { common } from '@/api/common.js'
	export default {
	  setup(props, {
			root,refs
		   }) {
			   const {confirm} = global()
			   const { getInfoCategory,categoryItem } = common()
			// data
			const form = reactive({
				categoryName: '',
				secCategoryName: ''
			})
			const isLoad = ref(false)
			const category_first = ref(true)
			const category_children = ref(true)
			const category = reactive({val:[]})
			const parentId = ref(null)
			const disabled_first = ref(true)
			const disabled_children = ref(true)
			const disabled_btn = ref(true)
			const btnTxt = ref(true)
			// methods
			const addFirstM =()=>{
				if (!form.categoryName) {
					return root.$message({
						message: '不能为空',
						type: 'error'
					})
				}
				isLoad.value = true
				addFirstCategory({
						categoryName: form.categoryName
					})
					.then(res => {
						const {
							resCode,
							message,
							data
						} = res
						category.val.push(data)
						isLoad.value = false //一般.catch里面还要写一份 我懒得写了
						root.$message({
							message,
							type: 'success'
						})
						form.categoryName=''
						// refs.categoryFrom.resetFields()
					})
			} 
			const addChildrenM=()=>{
				if (!form.secCategoryName) {
					return root.$message({
						message: '不能为空',
						type: 'error'
					})
				}
				isLoad.value = true
				addChildrenCategory({
						categoryName: form.secCategoryName,
						parentId:parentId.value,
					})
					.then(res => {
						const {
							resCode,
							message,
							data
						} = res
						const index = category.val.findIndex(item=>item.id===parentId.value)
						category.val[index].children&&category.val[index].children.push(data) ||( category.val[index].children = data)
						console.log(category)
						isLoad.value = false //一般.catch里面还要写一份 我懒得写了
						root.$message({
							message,
							type: 'success'
						})
						form.secCategoryName=''
						parentId.value = null
						// refs.categoryFrom.resetFields()
					})
			}
			const editM =()=>{
				editCategory()
			}
			const submit = () => {
				btnTxt.value&&category_first.value&&addFirstM()
				btnTxt.value&&category_children.value&&addChildrenM()
				!btnTxt.value&&editM()
			}
			const addFirst = () => {
				category_first.value = true
				category_children.value = false
				disabled_first.value = false 
				disabled_btn.value = false 
				form.categoryName = ''
			}
			const addChildren =(item)=>{
				const {id,parent_id} = item 
				parentId.value = id
				category_first.value = false
				category_children.value = true
				disabled_children.value = false
				disabled_btn.value = false 
				form.secCategoryName = ''
			}
			// 监听
			watch(()=>categoryItem.item,(val)=>{
				category.val = val
			})
			onMounted(()=>{
				// 初始化获取
					getInfoCategory()
			})
			const deleteFirstM = (item)=>{
				const fn = async ()=>{
						const {id,parent_id} =item
						const res =await deleteCategory({categoryId:id})
						const {resCode} = res 
						
				      category.val.forEach((item,idx,arr)=>{
						if(item.id === parent_id) {
							const i = arr[idx].children&&arr[idx].children.findIndex(itm=>{
								return itm.id === id
							})
							return arr[idx].children.splice(i,1)
						}else if(item.id === id){
							return arr.splice(idx,1)
						}
						
				      })
				 resCode===0&&root.$message.success('删除成功')
				}
				confirm({content:'确定删除？',fn})
			}
			const edit = (obj)=>{
				const {type,item,itm} = obj
				if(type==='editOne'){
					btnTxt.value=false
					addFirst()
					form.categoryName = item.category_name

				}
				if(type==='editTwo'){
					btnTxt.value=false
					addChildren(itm)
					form.secCategoryName = itm.category_name
				}
				
			}

			return {
				// data 
				form,
				category_first,
				category_children,
				category,isLoad,disabled_first,disabled_children,disabled_btn,btnTxt,
				// methods
				submit,
				addFirst,
				addChildren,
				deleteFirstM,
				edit
			}
		}
	}
</script>

<style lang="scss" scoped>
	.category-wrap {
		div:first-child {
			&::before {
				top: 20px;
			}
		}

		div:last-child {
			&::before {
				bottom: 20px;
			}
		}
	}

	.category {
		position: relative;
		line-height: 44px;
		cursor: pointer;

		&:before {
			content: '';
			position: absolute;
			bottom: 0;
			top: 0;
			left: 24px;
			border-left: 1px dotted #000;
		}

		h4 {
			position: relative;
			padding-left: 40px;
		}

		svg {
			position: absolute;
			left: 16px;
			top: 15px;
			background-color: #fff;
			font-size: 17px;
		}

		li {
			position: relative;
			padding-left: 36px;
			margin-left: 24px;

			&:before {
				content: '';
				position: absolute;
				width: 32px;
				left: 0;
				top: 22px;
				border-bottom: 1px dotted #000;
			}
		}

		li,
		h4 {
			@include webkit(transition, all .3s ease 0s);

			&:hover {
				background-color: #f3f3f3;

				.buttom-group {
					display: block;
				}
			}
		}
	}

	.buttom-group {
		display: none;
		position: absolute;
		z-index: 2;
		right: 11px;
		top: -1px;

		button {
			font-size: 12px;
		}
	}

	.menu-title {
		line-height: 44px;
		padding-left: 22px;
		background-color: #f3f3f3;
	}

	.from-wrap {
		width: 410px;
		padding-top: 26px;
	}

	.hr-e9e9e9 {
		width: calc(100% + 40px);
		margin-left: -20px;
		border: none;
		margin-top: 30px;
		margin-bottom: 30px;
		border-bottom: 1px solid #e9e9e9;

	}
</style>
